import { ProjectInfo } from "~/routes/api/resume.ts";
import ReviewContent from "~/components/ReviewContent.tsx";
import OrgIcon from "~/components/icons/org.tsx";
import Calendar from "~/components/icons/calendar.tsx";
import Pepples from "~/components/icons/pepples.tsx";

export default (props: ProjectInfo) => {
  return (
    <div class="mt-10 sm:max-w-sm xs:max-w-sm p-6 mx-auto bg-white sm:border xs:border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
      <ReviewContent
        userAvatar={props.companyLogo}
        userName={props.name}
        subject={props.description}
        metas={[
          {
            icon: <OrgIcon />,
            link: {
              href: props.companyMapLink,
              children: props.companyAddress,
            },
          },
          {
            icon: <Calendar />,
            link: props.startWidth ?? "",
          },
          {
            icon: <Pepples />,
            link: props.projectTag ?? "",
          },
        ]}
        description={props.detailed}
      />
    </div>
  );
};
